<!--
 * @Author: 张辰龙 zhangchenlong@julimeng.com
 * @Date: 2025-06-20 09:22:48
 * @LastEditors: 张辰龙 zhangchenlong@julimeng.com
 * @LastEditTime: 2025-06-24 14:42:17
 * @FilePath: /zrreportWxMp/pagesTools/reportingAdress/components/currentBanner.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="current-banner">
        <view class="banner-tab">
            <view @click="tabClick(index)" v-for="(item, index) in tabList" :key="index"
                :class="!currentIndex == index ? 'tab-item' : 'tab-item-active'">
                <view class="tab-item-icon">
                    <image
                        :src="require(index == 0 ? '../../static/address/address.png' : '../../static/address/bank.png')"
                        mode="scaleToFill" />
                </view>
                <view class="tab-item-text">{{ item.name }}</view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        currentIndex: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            tabList: [{ name: '征信网点查询', id: 0, icon: '' }, { name: '银行通讯录', id: 1, icon: '' }]
        }
    },
    methods: {
        tabClick(index) {
            this.$emit('changeTab', index)
        }
    }
}
</script>
<style lang="scss" scoped>
.banner-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;

    >view {
        width: 326rpx;
        height: 138rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }

    .tab-item {

        background: #FFFFFF;
        border-radius: 30rpx;
    }

    .tab-item-active {
        border: 3rpx solid #FA7700;
        background: linear-gradient(180deg, #CFE0FF 0%, #FFFFFF 100%);
        border-radius: 30rpx;
       
    }


    .tab-item-icon {
        width: 42rpx;
        height: 42rpx;
        margin-right: 20rpx;
        image {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
